<style lang="scss" scoped>
  .catebox {
    height: 100%;
    overflow-y: auto;
  }

  .catebox h1 {
    font-weight: 400;
    font-size: 16px;
    padding: 3px 3px;
  }

  .catebox ul {}

  .catebox ul li {
    padding: 5px 0 7px 0;
  }

  .catebox ul li .vbtns {
    display: none;
  }

  .catebox ul li:hover .vbtns {
    display: inline-block;
  }

  .catebox ul li.cur .font-blue {
    color: #f60 !important;
  }

  .catebox ul li.catelevel0 {}

  .catebox ul li.catelevel1 {
    padding-left: 24px;
  }

  .catebox ul li.catelevel2 {
    padding-left: 48px;
  }

  .catebox ul li.catelevel3 {
    padding-left: 72px;
  }

  .catebox ul li.catelevel4 {
    padding-left: 96px;
  }

  .catebox ul li.catelevel5 {
    padding-left: 120px;
  }

  .catebox .inlist {
    border: solid 1px #f1f1f1;
    border-bottom: 0;
    border-top: none;
    box-shadow: 0px 0px 3px 0px #80808085;
    padding: 9px 22px;
  }
</style>
<template>
  <div class="catebox">
    <div size="large" fixed v-loading='loading'></div>
    <div class="inlist">
      <ul>
        <li :class="'catelevel0 ' + (curid == 0 ? 'cur' : '')"><a href="javascript:void(0)" class="f16 fb font-gray"
            @click.stop="selectItem({id: 0})">全部</a></li>
        <li v-for="(item, index) in data" :key="index"
          :class="'catelevel' + item.level + ' ' + (curid == item.id ? 'cur' : '')"
          v-if="(!item.show || item.show == 1 || item.click == 1)">
          <template v-if="item.edit && item.edit == 1">
            <el-input v-model="item.name" style="width: 120px;" placeholder="名称"></el-input>
            <el-input @blur="changeSort(item)" v-model="item.sort" style="width: 60px;" placeholder="序号"></el-input>
            <div class="dis5"></div>
            <el-button type="primary" @click.stop="cateSave(index, item)" size="mini" circle class="el-icon-plus">
            </el-button>
            <el-button type="default" @click.stop="cancelEdit(index, item)" size="mini" circle class="el-icon-close">
            </el-button>
          </template>
          <template v-else>
            <a href="javascript:void(0)" @click.stop="selectItem(item)" class="font-blue">
              <span class="f16 font-blue">
                <i style="cursor:pointer;" @click.stop="showHideChild(item,index)"
                  :class="'el-icon-arrow-' + (item.show == 2 ? 'up' : 'down')"></i>
                {{ item.name }}</span>
              <span class="font-gray2 f12" v-if="item['has_children'] > 0"> ({{ item['has_children'] }}) </span>
              <span class="fr vbtns">
                <el-button @click.stop="addItem(index + 1, item.id, item.level + 1,item)" type="primary" size="mini"
                  circle class="el-icon-plus" v-if="item.level < 10"></el-button>
                <el-button @click.stop="editItem(item)" type="primary" size="mini" circle class="el-icon-setting">
                </el-button>
                <el-button @click.stop="delItem(index, item)" type="danger" size="mini" circle class="el-icon-delete">
                </el-button>
              </span>
            </a>
          </template>
        </li>
      </ul>
      <div class="dis20"></div>
      <div>
        <el-button @click="addItem(data.length, 0, 0)" size="small" type="primary" circle class="el-icon-plus">
        </el-button>
        <!-- <el-button @click="getcate" type="default" size="small" circle class="el-icon-close"></el-button> -->
      </div>
      <div class="dis20"></div>
    </div>
  </div>
</template>
<script>
  export default {
    props: ['url'],
    data() {
      return {
        data: [],
        loading: false,
        curid: 0,
        that: {}
      }
    },
    mounted() {
      this.getcate()
    },
    methods: {
      changeSort(item) {

      },
      selectItem(item) {
        this.curid = item.id
        this.$emit('selectItem', item)
      },
      getcate() {
        this.loading = true
        this.$api.post(this.url['get']).then((res) => {
          if (res.status === 1) {
            if (this.data) {
              this.data = []
              this.loop(res.data)
              this.data.forEach(item => {
                this.$set(item, 'edit', 0)
                this.$set(item, 'show', 1)
              });
            } else {
              this.loop(res.data)
              this.data.forEach(item => {
                this.$set(item, 'edit', 0)
                this.$set(item, 'show', 1)
              });
            }
          }
          this.loading = false
        })
      },
      loop(item) {
        item.forEach(elem => {
          if (elem.childrens.length > 0) {
            this.data.push(elem)
            this.loop(elem.childrens)
          } else {
            this.data.push(elem);
          }

        })
      },
      cateSave(index, item) {
        let val = {
          'name': item.name,
          'sort': item.sort,
          'pid': item.pid
        }
        if (item.id) {
          val['id'] = item.id
          this.$api.post(this.url['edit'], val).then((res) => {
            if (res.status === 1) {
              this.$set(item, 'edit', 0)
              this.getcate()
            }
          })
        } else {
          this.$api.post(this.url['add'], val).then((res) => {
            if (res.status === 1) {
              this.$set(item, 'edit', 0)
              this.$set(item, 'id', res.data.id)
              this.getcate()
            }
          })
        }
        this.that = {}
      },
      cancelEdit(index, item) {
        if (item.id > 0) {
          this.$set(item, 'edit', 0)
        } else {
          this.data.splice(index, 1)
          if (this.that['has_children']) {
            this.that['has_children'] = parseInt(this.that['has_children']) - 1
          }
        }
        this.that = {}
      },
      showHideChild(item, index) {
        let pid = -1
        let show = 0
        for (let i = 0; i < this.data.length; i++) {
          if (this.data[i].id == item.id) {
            pid = item.pid
            show = (!item.show || item.show === 1) ? 2 : 1
            this.$set(this.data[i], 'show', show)
            continue
          }
          if (i > index) {
            if (parseInt(item['level']) >= parseInt(this.data[i]['level'])) {
              break
            }
            if (pid == this.data[i]['pid']) {
              break;
            } else {
              this.$set(this.data[i], 'show', show)
            }
            this.$set(this.data[i], 'click', 0)
          }
        }
        this.$set(item, 'click', 1)
      },
      delItem(index, item) {
        this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$api.post(this.url['del'], item).then((res) => {
            if (res.status === 1) {
              this.data.splice(index, 1)
              this.data.forEach(elem => {
                if ((elem.id == item.pid) || !item.level) {
                  elem['has_children'] = parseInt(elem['has_children']) - 1
                  return
                }
              })
            } else {
              this.$error(res.msg)
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      editItem(item) {
        this.$set(item, 'edit', 1)
      },
      addItem(index, pid, level, item) {
        this.that = item
        if (item) {
          item['has_children'] = parseInt(item['has_children']) + 1
        }
        this.data.splice(index, 0, {
          id: 0,
          pid: pid,
          name: '',
          level: level,
          sort: 0,
          edit: 1
        })
      }
    }
  }
</script>